<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">

    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
    <!--以下是兼容IE8高速渲染模式和360的高速模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 搜索引擎 方便爬虫扒-->
    <meta name="author" content="公司名称">
    <meta name="keywords" content="关键词，炉石，炉石传说，卡牌游戏">
    <meta name="description" content="jerehedu">
    <title>《炉石传说》官方网站_暴雪首款免费休闲卡牌网游</title>

    <link rel="icon" href="http://hearthstone.nos.netease.com/3/common/hs.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="http://hearthstone.nos.netease.com/3/common/hs.ico" type="image/x-icon"/>


    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="../js/angular.min.js"></script>
    <script type="text/javascript" src="../controller/home.js"></script>
    <link rel="stylesheet" href="../css/home.css"/>
    <!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
    <![endif]-->
    <script>
        $(function(){
            var navLeftGameBtn=$('.nav-left-game-btn');
            var navLeftGameBtn2=$('.nav-left-game-btn2');
            navLeftGameBtn.on('click',function(){
                navLeftGameBtn2.next().hide();
                $(this).next().toggle();
                return false;
            });
            navLeftGameBtn2.on('click',function(){
                navLeftGameBtn.next().hide();
                $(this).next().toggle();
                return false;
            });
//            var ev = e || window.event;
//            if(ev.stopPropagation){
//                ev.stopPropagation();
//            }
//            else if(window.event){
//                window.event.cancelBubble = true;//����IE
//            }
            $(document.body).on('click',function(){
                navLeftGameBtn.next().hide();
                navLeftGameBtn2.next().hide();
            });
        });
    </script>
    <script>
        $(document).scroll(function(){
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop<=300){
                $("#headerFlash").show();
                $(".video-mask").show();
            }else{
                $("#headerFlash").hide();
                $(".video-mask").hide();
            }
        });
    </script>
</head>
<body ng-controller="controller">
    <div id="nav-client-header">
        <div class="nav-header-content clearFix" onselectstart='return false' style="-moz-user-select:none;">
            <ul class="nav-header-left clearFix">
                <li class="nav-left-logo">
                    <a href="http://www.battlenet.com.cn/zh/"></a>
                </li>
                <li class="nav-left-game">
                    <div>
                        <a class="nav-left-game-btn">游戏 <i></i></a>
                        <div class="clearFix" style="z-index: 999">
                            <a href="##">
                                <i style=" background-position: -2px -0;"></i>
                                《魔兽世界®》
                            </a>
                            <a href="##">
                                <i style=" background-position: -72px -0;"></i>
                                《暗黑破坏神®III》
                            </a>
                            <a href="##">
                                <i style=" background-position: -142px -0;"></i>
                                《星际争霸®II》
                            </a>
                            <a href="##">
                                <i style=" background-position: -212px -0;"></i>
                                《炉石传说®》
                            </a>
                            <a href="##">
                                <i style=" background-position: -282px -0;"></i>
                                《风暴英雄™》
                            </a>
                            <a href="##">
                                <i style=" background-position: -352px -0;"></i>
                                《守望先锋™》
                            </a>
                        </div>
                    </div>
                </li>
                <li class="nav-left-store">
                    <a href="">商城</a>
                </li>
            </ul>
            <ul class="nav-header-right clearFix">
                <li>
                    <a href="##">支持</a>
                </li>
                <li>
                    <div>
                        <a  class="nav-left-game-btn2">
                            您的通行证 <i></i>
                        </a>
                        <div class="user-onload" style="z-index: 999">
                            <div class="arrow-top"></div>
                            <div class="user-profile">
                                <div class="dropdown-section">
                                    <div class="nav-box">
                                        <a href="http://account.bnet.163.com/battlenet/login?inner_client_id=hs&inner_redirect_uri=http%3A%2F%2Fhs.blizzard.cn%2Fbattlenet%2Flogin%3Fredirect_url%3Dhttp%253A%252F%252Fhs.blizzard.cn%252Fhome%252F">登录</a>
                                    </div>
                                </div>
                                <div class="dropdown-section hidden">
                                    <div class="nav-box selectable">
                                        <div class="label"><span class="battletag"></span><span class="code"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="dropdown-section">
                                    <ul class="nav-list clearFix">
                                        <li>
                                            <a href="http://www.battlenet.com.cn/account/management/" target="_blank">
                                                <i class="nav-icon-character-cog"></i>
                                                账户
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="dropdown-section hidden">
                                    <a class="nav-item nav-item-box nav-logout" href="#">
                                        <i class="nav-icon-24-blue nav-icon-logout"></i>
                                        注销
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="fler">
        <div id="content-bot">
            <video id="headerFlash" autoplay="autoplay" loop="true" preload="auto" width="1200" height="224" style="display: block;">
                <source src="../vedio/Fheader_v2.webm" type="video/webm">
                <source src="../vedio/Fhome-cart.mp4" type="video/mp4">
            </video>
            <div class="video-mask"></div>
<script>
    $(document).scroll(function(){
       var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop>=273){
            $('#nav-header').removeClass('nav-header').addClass('nav-headerChange');
        }else{
            $('#nav-header').removeClass('nav-headerChange').addClass('nav-header');
        }
    });
</script>
            <div id="header" >
                <h1 class="logo"></h1>
                <div class="search-box">
                    <input type="text" maxlength="50" placeholder="请输入关键字" data-f="0"/>
                    <a href="http://hs.blizzard.cn/search"></a>
                </div>
                <div id="nav-header" class="nav-header">
                    <ul id="nav" class="clearFix">
                        <li></li>
                        <li class="navbar1">
                            <a href="/home/"></a>
                        </li>
                        <li class="navbar2">
                            <a href="/news?new"></a>
                            <ul>
                                <li>
                                    <a href="#">最新</a>
                                </li>
                                <li>
                                    <a href="#">博文</a>
                                </li>
                                <li>
                                    <a href="#">赛事</a>
                                </li>
                                <li>
                                    <a href="#">活动</a>
                                </li>
                                <li>
                                    <a href="#">媒体</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navbar3">
                            <a href="/news?new"></a>
                            <ul>
                                <li>
                                    <a href="#">最新</a>
                                </li>
                                <li>
                                    <a href="#">博文</a>
                                </li>
                                <li>
                                    <a href="#">赛事</a>
                                </li>
                                <li>
                                    <a href="#">活动</a>
                                </li>
                                <li>
                                    <a href="#">媒体</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navbar4">
                            <a href="/news?new"></a>
                            <ul>
                                <li>
                                    <a href="#">最新</a>
                                </li>
                                <li>
                                    <a href="#">博文</a>
                                </li>
                                <li>
                                    <a href="#">赛事</a>
                                </li>
                                <li>
                                    <a href="#">活动</a>
                                </li>
                                <li>
                                    <a href="#">媒体</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navbar5">
                            <a href="/home/"></a>
                        </li>
                        <li class="navbar6">
                            <a href="/home/"></a>
                        </li>
                        <li class="navbar7">
                            <a href="/news?new"></a>
                            <ul>
                                <li>
                                    <a href="#">最新</a>
                                </li>
                                <li>
                                    <a href="#">博文</a>
                                </li>
                                <li>
                                    <a href="#">赛事</a>
                                </li>
                                <li>
                                    <a href="#">活动</a>
                                </li>
                                <li>
                                    <a href="#">媒体</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navbar8">
                            <a href="/home/"></a>
                        </li>
                        <li></li>
                    </ul>
                </div>
            </div>
<!--这是轮播的js代码-->
<script>
    $(document).ready(function(){
        imgsilder();
        imgBoxSilder();
    });
    function imgsilder(){
        var width = $('#slide-box li').innerWidth();
        var textlist=$('.txtList li');
        $(window).resize(function(){
            width = $('#slide-box li').innerWidth();
        });
        var title = $('.eyebtn li');
        var index = 0;
        var timer = setInterval(autorun,4000);

        title.mouseover(function(){
            clearInterval(timer);
            index = $(this).index();
            slider();
        });
        $('.eyebtn').mouseout(function(){
            timer = setInterval(autorun,4000);
        });
        function autorun(){
            index++;
            if(index == title.length){
                index = 0;
            }
            slider();
        }
        function slider(){
            title.removeClass('eyebtn-hover');
            textlist.removeClass('active');
            $(window).resize(function(){
                width = $('#slide-box li').innerWidth();
            });
            $('#slide-box').css("left",width*index*(-1)+"px");
            $(title[index]).addClass('eyebtn-hover');
            $(textlist[index]).addClass('active');
        }
    }
    function imgBoxSilder(){
        var width = $('#imgBoxSilder').find('li').innerWidth();
        var li=$('#imgBoxSilder li');
        $(window).resize(function(){
            width = $('#imgBoxSilder').find('li').innerWidth();
        });
        console.log(width);
        var leftBtn = $('a.left-nav-btn');
        var rightBtn = $('a.right-nav-btn');
        var box=$('.slide-right-download');
        var index = 0;
        var timer = setInterval(autorun,3000);

        box.mouseover(function(){
            console.log('ok');
            clearInterval(timer);
        });
        box.mouseleave(function(){
            timer = setInterval(autorun,3000);
        });
        leftBtn.on('click',function(){
           --index;
            slider();
        });
        rightBtn.on('click',function(){
            ++index;
            slider();
        });
        function autorun(){
            index++;
            if(index == 3){
                index = 0;
            }
            slider();
        }
        function slider(){
            $(window).resize(function(){
                width = $('#imgBoxSilder').find('li').innerWidth();
            });
            if(index<=-1){
                index=2;
            }else if(index>=3){
                index=0;
            }
            $('#imgBoxSilder').css("left",width*index*(-1)+"px");
        }
    }
</script>
            <div id="content">
                <div class="homeCon">
                    <div class="wraperConArea clearFix">
                        <div class="homeConMain">
                            <div class="homeConMain-top">
                                <div class="slide">
                                   <div class="slide-content">
                                       <ul id="slide-box">
                                           <li><a href="http://hs.blizzard.cn/articles/16/7728" style="background: url('../img/ddd.jpg')"></a></li>
                                           <li><a href="http://hs.blizzard.cn/articles/16/7205" style="background: url('../img/bbb.png')"></a></li>
                                           <li><a href="http://gold.blizzard.cn/hs/articles/332/2038/" style="background: url('../img/ccc.jpg')"></a></li>
                                           <li><a href="http://hs.blizzard.cn/articles/16/6495"  style="background: url('../img/aaa.png')"></a></li>
                                       </ul>
                                   </div>
                                    <ul class="txtList">
                                        <li class="active">《炉石传说》最新扩展包“龙争虎斗加基森”即将上线</li>
                                        <li style="padding-left: 18px"> 迎新合集现已上线</li>
                                        <li style="padding-left: 18px"> 黄金公开赛南京站：11月25日-27日</li>
                                        <li> 《炉石传说》好友招募现已开启</li>
                                    </ul>
                                    <ul class="eyebtn clearFix">
                                        <li class="eyebtn-hover"></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                                <ul class="videoEye clearFix">
                                    <li>
                                        <a href="http://hs.blizzard.cn/articles/16/7788">
                                            <img src="../img/jjc300x150.jpg" alt="img"/>
                                        </a>
                                        <p>“龙争虎斗加基森”全新卡牌一览</p>
                                    </li>
                                    <li>
                                        <a href="http://hs.blizzard.cn/articles/16/7788">
                                            <img src="../img/jjc300x150.png" alt="img"/>
                                        </a>
                                        <p>竞技场胜率排行活动开启</p>
                                    </li>
                                </ul>
                                <div class="news-container">
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/F15aj260x130.jpg" alt="img"/>
                                            <h4>初始金教主</h4>
                                            <p>你想要加入暗金教？嘘！小声点！这里到处都是其他家族的间谍！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">20</span>
                                            </a>
                                            <span>2016-11-15</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/7sls260x130.jpg" alt="img"/>
                                            <h4>全民实力秋季赛第二周回顾</h4>
                                            <p>全民实力赛秋季赛第二周的比赛于上周六结束，15名玩家夺得了城市赛的冠军，祝贺他们！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">0</span>
                                            </a>
                                            <span>2016-11-14</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/images1231231" alt="img"/>
                                            <h4>乱斗模式——“迷你战争”现已开放</h4>
                                            <p>顽劣的缩小射线工程师对你的卡牌做了手脚！现在所有随从的攻击力和生命值均为1，且法力值消耗仅为1点！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">83</span>
                                            </a>
                                            <span>2016-11-10</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/jjc300x150.jpg" alt="img"/>
                                            <h4>“龙争虎斗加基森”全新卡牌一览</h4>
                                            <p>全新扩展包“龙争虎斗加基森”即将上线，你可以在这里抢先了解到现已公布的所有卡牌。</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">262</span>
                                            </a>
                                            <span>2016-11-09</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/sd260x130.jpg" alt="img"/>
                                            <h4>污手党秘闻</h4>
                                            <p>欢迎来到污手街，小伙子。我们听说你正在考虑加入哪个家族？那你可来对地方了。</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">59</span>
                                            </a>
                                            <span>2016-11-08</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/jjc300x150.png" alt="img"/>
                                            <h4>祝贺Pavel夺得2016《炉石传说》世界锦标赛冠军</h4>
                                            <p>随着2016《炉石传说》世界锦标赛落下帷幕，我们终于迎来了新一届的世界冠军！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">434</span>
                                            </a>
                                            <span>2016-11-06</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/F06cha260x130.jpg" alt="img"/>
                                            <h4>祝贺Pavel夺得2016《炉石传说》世界锦标赛冠军</h4>
                                            <p>随着2016《炉石传说》世界锦标赛落下帷幕，我们终于迎来了新一届的世界冠军！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">434</span>
                                            </a>
                                            <span>2016-11-06</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/6blizhs260x130.jpg" alt="img"/>
                                            <h4>世界锦标赛决赛日综述：Pavel夺冠</h4>
                                            <p>2016《炉石传说》世界锦标赛落下帷幕，最终来自俄罗斯的选手Pavel夺得本届比赛的冠军！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">91</span>
                                            </a>
                                            <span>2016-11-06</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/4lzhd260x130.jpg" alt="img"/>
                                            <h4>号外！号外！“龙争虎斗加基森”公布了！</h4>
                                            <p>你以为你很成功吗，孩子？你还差得远呢！来加基森的街上走一走，我来让你看看谁才是这里真正的老大。</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">124</span>
                                            </a>
                                            <span>2016-11-05</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/F03ggz260x130.jpg" alt="img"/>
                                            <h4>暴雪嘉年华带你走进龙争虎斗加基森</h4>
                                            <p>一起来了解一下《炉石传说》最新扩展包“龙争虎斗加基森”的开发过程！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">164</span>
                                            </a>
                                            <span>2016-11-05</span>
                                        </p>
                                    </div>
                                    <div class="news">
                                        <a href="##">
                                            <img src="../img/2F03cb260x130.jpg" alt="img"/>
                                            <h4>排名对战2016年十一月赛季——半山农场</h4>
                                            <p>《炉石传说》2016年11月对战赛季已经打响——而我们又将为大家带来新的卡牌背面图案！</p>
                                        </a>
                                        <p class="clearFix">
                                            <a href="##" class="clearFix">
                                                <span class="heart"></span>
                                                <span class="attention">25</span>
                                            </a>
                                            <span>2016-11-08</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="homeshowmore">
                                    <a href="##">更多新闻</a>
                                </div>
                                <div class="homebottompage"></div>
                            </div>
                        </div>
                        <div class="homeConBar">
                            <div class="homeconbarTop">
                                <a href="landing.html"></a>
                                <div class="downloadControll clearFix">
                                    <span class="firstdownloadbtn BtnChange"></span>
                                    <span class="seconddownloadbtn"></span>
                                    <span class="thirddownloadbtn"></span>
                                    <a href="http://www.battlenet.com.cn/download/getInstallerForGame?os=win&locale=zhCN&version=LIVE&gameProgram=HEARTHSTONE
                                    " target="_blank"></a>
                                    <video id="downloadbtn" autoplay="autoplay" loop="true" preload="auto">
                                        <source src="../vedio/Fhome_download_btn.mp4" type="video/mp4"/>
                                        <source src="../vedio/Fhome_download_btn.webm" type="video/webm"/>
                                    </video>
                                    <div class="downloadmask"></div>
                                </div>
                                <div class="slide-right-download">
                                    <div>
                                        <ul class="clearFix" id="imgBoxSilder">
                                            <li>
                                                <a href="http://heroes.blizzard.cn/minisite/dorm-heroes/hs">
                                                <span class="back1">
                                                    <img src="../img/1F244x124-1.png" alt="background"/>
                                                </span>
                                                 <span class="back2">
                                                    <img src="../img/132F244x124-2.png" alt="background"/>
                                                </span>
                                                    <p>秋季赛报名已开始</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="http://heroes.blizzard.cn/minisite/dorm-heroes/hs">
                                                <span class="back1">
                                                    <img src="../img/2F27nj244x124_bg.png" alt="background"/>
                                                </span>
                                                 <span class="back2">
                                                    <img src="../img/2F27nj244x124_logo.png" alt="background"/>
                                                </span>
                                                    <p>黄金公开赛南京站</p>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="http://heroes.blizzard.cn/minisite/dorm-heroes/hs">
                                                <span class="back1">
                                                    <img src="../img/2Fsls2.png" alt="background"/>
                                                </span>
                                                 <span class="back2">
                                                    <img src="../img/2Fsls161.png" alt="background"/>
                                                </span>
                                                    <p>秋季报名赛已开启</p>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <a class="left-nav-btn"></a>
                                    <a class="right-nav-btn"></a>
                                </div>

                            </div>
                            <div class="dragWrapper">
                                <div class="module_media">
                                    <div class="mid">
                                        <div class="top">
                                            <div class="bot">
                                                <h1 class="clearFix">
                                                    <span style='background-position:-87px -4px;'></span>精彩直播
                                                </h1>
                                                <div class="video-box">
                                                    <img src="../img/32Fhome2Fv52Flive.jpg" alt="img"/>
                                                    <a href="http://hs.blizzard.cn/articles/98/2493 "></a>
                                                    <span class="over"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="module_media">
                                    <div class="mid">
                                        <div class="top">
                                            <div class="bot">
                                                <h1 class="clearFix">
                                                    <span style='background-position:-4px -80px;'></span>论坛热帖
                                                </h1>
                                                <div class="module_news">
                                                    <ul>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>卡拉赞之夜论坛活动—晒截图赢好礼
                                                            </a>
                                                            <span class="date">08-26</span>
                                                        </li>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>关于5.0补丁中变动卡牌的分解
                                                            </a>
                                                            <span class="date">04-27</span>
                                                        </li>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>“船长的鹦鹉”及“老瞎眼”获取说明
                                                            </a>
                                                            <span class="date">04-26</span>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                <span></span>好友列表变动须知
                                                            </a>
                                                            <span class="date">04-12</span>
                                                        </li>
                                                    </ul>
                                                    <a href="http://bbs.hs.blizzard.cn" target="_blank" class="more"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="module_media">
                                    <div class="mid">
                                        <div class="top">
                                            <div class="bot">
                                                <h1 class="clearFix">
                                                    <span style='background-position:-46px -74px;'></span>媒体推荐
                                                </h1>
                                                <div class="module_news">
                                                    <ul>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>【本周直播】 《炉石传说》直播汇总
                                                            </a>
                                                        </li>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>【爱玩网】 爱玩集卡册之炉石英雄卡赏析
                                                            </a>
                                                        </li>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>【活动】 “卡拉赞之夜”社区媒体活动
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                <span></span>【NGA】 2016黄金超级联赛夏季赛单卡分析
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <a href="http://bbs.hs.blizzard.cn" target="_blank" class="more"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="module_media">
                                    <div class="mid">
                                        <div class="top">
                                            <div class="bot">
                                                <h1 class="clearFix">
                                                    <span style='background-position:-87px -39px;'></span>第三方赛事推荐
                                                </h1>
                                                <div class="module_news">
                                                    <ul>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>古神狂欢《炉石传说》征服赛7月22日开打
                                                            </a>
                                                        </li>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>SL i-League世界总决赛7月8日在上海揭幕
                                                            </a>
                                                        </li>
                                                        <li class="clearFix">
                                                            <a href="">
                                                                <span></span>《炉石传说》狼蛛杯五月海选赛开启报名
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                <span></span>酒仙的试炼小组赛开启 观赛预约进行中
                                                            </a>
                                                        </li>
                                                    </ul>
                                                    <a href="http://bbs.hs.blizzard.cn" target="_blank" class="more"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="rightModule-normal">
                                <div class="subModule">
                                    <div class="text">
                                        <h4>充值指引</h4>
                                    </div>
                                    <a href="" class="icon_1" target="_blank"></a>
                                </div>
                                <div class="subModule">
                                    <div class="text">
                                        <h4>随身炉石App</h4>
                                    </div>
                                    <a href="" class="icon_2" target="_blank"></a>
                                </div>
                                <div class="subModule change-sub">
                                    <div class="text text-s">
                                        <h4>第十届暴雪嘉年华</h4>
                                        <p>暴雪25周年庆典</p>
                                    </div>
                                    <a href="" class="icon_3" target="_blank"></a>
                                </div>
                                <div class="subModule change-sub">
                                    <div class="text text-s">
                                        <h4>官方周边商城</h4>
                                        <p>bmall.163.com</p>
                                    </div>
                                    <a href="" class="icon_4" target="_blank"></a>
                                </div>
                                <div class="subModule change-sub">
                                    <div class="text text-s">
                                        <h4>官方充值旗舰店（天猫）</h4>
                                        <p>blz.tmall.com</p>
                                    </div>
                                    <a href="" class="icon_5" target="_blank"></a>
                                </div>
                                <div class="subModule change-sub">
                                    <div class="text text-s">
                                        <h4>积分奖励系统</h4>
                                        <p>reward.battlenet.com.cn</p>
                                    </div>
                                    <a href="" class="icon_6" target="_blank"></a>
                                </div>
                                <div class="subModule change-sub">
                                    <div class="text text-s">
                                        <h4>加入我们</h4>
                                        <p>wangzhiyi.zhiye.com</p>
                                    </div>
                                    <a href="" class="icon_7" target="_blank"></a>
                                </div>
                            </div>
                            <div class="dragWrapper">
                                <div class="module_media">
                                    <div class="mid">
                                        <div class="top">
                                            <div class="bot">
                                                <h1 class="clearFix">
                                                    <span style='background-position:-4px -189px;'></span>互动社区
                                                </h1>
                                                <div class="comm_share">
                                                    <ul class="clearFix">
                                                        <li>
                                                            <a href="">
                                                                <span class="yixin"></span>
                                                                <em><img src="../img/Fv201FlayouFyixin_mark.png" alt="logo"/></em>易信
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                <span class="weixin"></span>
                                                                <em><img src="../img/Fv201FlayouFyixin_mark.png" alt="logo"/></em>微信
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                <span class="xinlang"></span>
                                                               新浪微博
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="">
                                                                <span class="lushi"></span>
                                                                <em><img src="../img/2Fcode_webapp.jpg" alt="logo"/></em>手机版官网
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <h3>官方邮箱</h3>
                                                            <a href="">
                                                                <p>hs@battlenet.com.cn</p>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <h3>客服热线</h3>
                                                            <p>0571-28090163</p>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="homeCon-bottom"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="footer">
                <div class="wrap">
                    <div class="footer-top clearFix">
                        <div class="regWrapper">
                            <a href="account.html" target="_blank"></a>
                        </div>
                        <div class="footer-top-left clearFix">
                            <a href="##">
                                <span style="background-position:-2px -3px; "></span>
                                <b>在线客服</b>
                            </a>
                            <a href="##">
                                <span style="background-position:-32px -3px; "></span>
                                <b>反馈</b>
                            </a>
                            <a href="##">
                                <span style="background-position:-2px -29px; "></span>
                                <b>加入我们</b>
                            </a>
                        </div>
                        <div class="footer-top-right">
                            <span style="padding-left: 10px;">合作品牌:</span>
                            <a href="##" class="nvidia" style="background: url('../img/logo.png');background-position:-352px 0;"></a>
                            <a href="mailto:business@battlenet.com.cn" class="mail" >
                                <i class="line-h"></i>
                                <i class="line-s"></i>
                            </a>
                            <span style="padding: 0 10px;font-style: normal;">合作媒体</span>
                            <a class="icon-more">
                                <i class="triangle"></i>
                            </a>
                        </div>
                    </div>
                    <div class="footer-bottom clearFix">
                        <div class="footer-bottom-left">
                            <a href="http://blizzard.com/" class="logo-z"></a>
                            <a href="http://www.163.com/" class="logo-w"></a>
                        </div>
                        <div class="footer-bottom-right">
                            <p class="API">
                                <a href="##">隐私</a>|
                                <a href="##">法律条款</a>|
                                <a href="##">API</a>
                            </p>
                            <p>©2016 暴雪娱乐股份有限公司版权所有 由上海网之易网络科技发展有限公司运营 著作权侵权 新出审字[2013]1510号
                                文网进字[2013]029号 沪网文[2014]0731-161号 增值电信业务经营许可证编号：沪B2－20080012
                                互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502022167号</p>
                            <div>
                                <a href="http://sh.cyberpolice.cn/infoCategoryListAction.do?act=initjpg"><img src="../img/police.png" alt="logo"/></a>
                                <a href="http://www.zx110.org/"><img src="../img/22.png" alt="logo"/></a>
                                <a href="http://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&entyId=20111011175417664"><img src="../img/33.png" alt="logo"/></a>
                                <a href="http://www.shjbzx.cn/"><img src="../img/44.png" alt="logo"/></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function(){
       var downloadbtn=$('.downloadControll span');
        var adownload=$('.downloadControll a');
        var maskDownload=$('.downloadmask');
        downloadbtn.on('click',function(){
            var index=$(this).index();
           $(this).siblings().removeClass('BtnChange');
           $(this).addClass('BtnChange');
            var href=['http://www.battlenet.com.cn/download/getInstallerForGame?os=win&locale=zhCN&version=LIVE&gameProgram=HEARTHSTONE',
            'https://itunes.apple.com/cn/app/lu-shi-chuan-shuo-mo-shou/id841140063?mt=8&ign-mpt=uo%3D4',
                    '/download/?dt=android'
            ];
//修改a标签的href属性
            adownload.attr('href',href[index]);
            if(index>=1){
                $('#downloadbtn').hide();
                maskDownload.css({'background-position':'-37px -'+(27+index*113)+'px'});
            }else{
                $('#downloadbtn').show();
            }
        });
    });
</script>
</html>